<!--
 * @Author: 番茄炒蛋蛋 wzh15802755802@163.com
 * @Date: 2024-05-22 16:51:20
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-05-24 15:55:01
 * @FilePath: \vue-element-admin-master-2\src\views\account-management\adminList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: 番茄炒蛋蛋 wzh15802755802@163.com
 * @Date: 2024-05-22 16:43:39
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-05-23 16:30:22
 * @FilePath: \vue-element-admin-master-2\src\views\account-management\adminType.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="contaner">
    <div class="selectTop">
      <div class="allType">
        <el-select v-model="admintype_id" placeholder="管理员类型">
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
        <el-select v-model="status" placeholder="全部状态">
          <el-option
            v-for="item in statusLists"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
        <el-input
          v-model="title"
          placeholder="请输入内容"
          clearable
          size="medium"
        ></el-input>
        <el-input
          v-model="account"
          placeholder="请输入账号"
          clearable
          size="medium"
        ></el-input>
        <div class="serch" @click="search">搜索</div>
      </div>

      <div class="addType" @click="addAdminShow = true">
        <i class="el-icon-plus"></i> 新增管理员账号
      </div>
    </div>
    <el-row>
      <el-col :span="4" v-for="item in adminList" :key="item.id" style=" margin: 10px ;min-width:240px">
        <el-card :body-style="{ padding: '0px' }">
          <div class="adminBox">
            <div class="file">
              <img :src="item.file_url" alt="" />
            </div>
            <h3>{{ item.title }}</h3>
            <p>{{ item.account }}</p>
            <div class="caozuo">
              <el-button @click="edit(item)" type="warning" size="mini"
                >编辑</el-button
              >
              <el-button @click="del(item.id)" type="danger" size="mini"
                >删除</el-button
              >
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 新增管理员分类 -->
    <el-dialog
      title="新增管理员账号"
      :visible.sync="addAdminShow"
      v-dialogDrag
      width="800px"
    >
      <el-form>
        <el-form-item label="用户头像" :label-width="formLabelWidth">
          <div
            class="file-up"
            type="ghost"
            icon="ios-cloud-upload-outline"
            @click="zh_uploadFile"
            v-show="!addFrom.file_url"
          >
            <i class="el-icon-upload"></i>
            <p>点击上传头像</p>
          </div>
          <div class="file-up" v-show="addFrom.file_url" @click="zh_uploadFile">
            <img :src="addFrom.file_url" >
          </div>
          <input
            type="file"
            ref="evfile"
            @change="zh_uploadFile_change"
            style="display: none"
          />
        </el-form-item>
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input v-model="addFrom.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号名称" :label-width="formLabelWidth">
          <el-input v-model="addFrom.account" autocomplete="off"></el-input>
        </el-form-item>
        
        <el-form-item label="账号类别" :label-width="formLabelWidth">
          <el-select v-model="addFrom.admintype_id" style="width: 640px;" placeholder="请选择账号类别">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所在部门" :label-width="formLabelWidth">
            <el-select v-model="addFrom.bumen_id" style="width: 640px;" placeholder="请选择所在部门" >
              <el-option
                v-for="item in bumenList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
          </el-select>
        </el-form-item>
        <el-form-item label="账号状态" :label-width="formLabelWidth">
          <el-radio v-model="addFrom.status" label="1">有效</el-radio>
          <el-radio v-model="addFrom.status" label="2">无效</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="quxiaoadd"
          >取 消</el-button
        >
        <el-button type="primary" @click="addAdmin">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑管理员分类 -->
    <el-dialog
      title="新增管理员账号"
      :visible.sync="editAdminShow"
      v-dialogDrag
      width="800px"
    >
      <el-form>
        <el-form-item label="用户头像" :label-width="formLabelWidth">
          <div
            class="file-up"
            type="ghost"
            icon="ios-cloud-upload-outline"
            @click="zh_uploadFile"
            v-show="!editFrom.file_url"
          >
            <i class="el-icon-upload"></i>
            <p>点击上传头像</p>
          </div>
          <div class="file-up" v-show="editFrom.file_url" @click="zh_uploadFile">
            <img :src="editFrom.file_url" >
          </div>
          <input
            type="file"
            ref="evfile"
            @change="zh_uploadFile_change"
            style="display: none"
          />
        </el-form-item>
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input v-model="editFrom.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号名称" :label-width="formLabelWidth">
          <el-input v-model="editFrom.account" autocomplete="off"></el-input>
        </el-form-item>
        
        <el-form-item label="账号类别" :label-width="formLabelWidth">
          <el-select v-model="editFrom.admintype_id" style="width: 640px;" placeholder="请选择账号类别">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所在部门" :label-width="formLabelWidth">
            <el-select v-model="editFrom.bumen_id" style="width: 640px;" placeholder="请选择所在部门" >
              <el-option
                v-for="item in bumenList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
          </el-select>
        </el-form-item>
        <el-form-item label="账号状态" :label-width="formLabelWidth">
          <el-radio v-model="editFrom.status" label="1">有效</el-radio>
          <el-radio v-model="editFrom.status" label="2">无效</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="editAdminShow = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="editAdmin(editFrom.id)">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页部分 -->
    <div class="pagination " v-if="adminList.length > 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        background
        :page-sizes="[ 10, 20]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { timeStamp2String } from "@/utils/time";
import {
  list_admin,
  list_admintype,
  list_bumen,
  qiniuconfig,
  create_admin,
  update_admin,
  delete_admin,
} from "@/api/user";
import * as qiniu from "qiniu-js";
export default {
  data() {
    return {
      timeStamp2String, //时间戳转时间的函数
      // 搜索
      admintype_id: "", //查询分类id
      status: "", //分类状态
      title: "", //搜索名称
      account:'',//搜索账号
      typeList: [], //分类列表

      statusLists: [
        { id: "1000", title: "全部" },
        { id: "0", title: "无效" },
        { id: "1", title: "有效" },
      ], //状态列表
      bumenList:[],//部门列表
      adminList: [], //管理员列表

      //弹窗
      formLabelWidth: "120px",
      //新增
      addAdminShow: false, //新增管理员弹窗
      addFrom:{
        bumen_id:'',
        admintype_id:'',
        title:'',
        account:'',
        file_url:'',
        status:'1',
      },

      //编辑
      editAdminShow:false,//编辑管理员弹窗
      editFrom:{},

      //分页
      currentPage:1,//当前页数
      counts:0,//总数
      page: 1, //页码
      page_size: 10, //分页大小
    };
  },
  created() {
    this.getTypeLists();
    this.getAdminLists();
    this.getBumen();
  },
  methods: {
    //获取管理员分类列表
    getTypeLists() {
      list_admintype({
        title: this.title,
        status: this.status == "1000" ? "" : this.status,
      }).then((res) => {
        if (res.retInt == 1) {
          const data = res.retRes;
          this.typeList = data;
          this.typeList.unshift({
            id:0,
            title:'全部'
          })
        }
      });
    },
    // 获取管理员列表
    getAdminLists() {
      list_admin({
        admintype_id: this.admintype_id,
        title: this.title,
        account: this.account,
        status: this.status,
        page_size: this.page_size,
        page: this.page,
      }).then((res) => {
        if (res.retInt == 1) {
          const data = res.retRes;
          this.adminList = data;
          this.counts = res.retCounts
        }
      });
    },
    //获取部门列表
    getBumen(){
      list_bumen().then(res=>{
        this.bumenList = res.retRes;
      })
    },
    //根据筛选条件搜索
    search() {
      this.getAdminLists();
    },
    //添加管理员确认按钮
    addAdmin() {
      console.log(this.addFrom);
      if (this.addFrom.file_url === "") {
        this.$message({
          message: "请选择头像",
          type: "warning",
        });
      } else if(this.addFrom.title === "") {
        this.$message({
          message: "请填写用户名称",
          type: "warning",
        });
      }else if(this.addFrom.account === "") {
        this.$message({
          message: "请填写用户账号",
          type: "warning",
        });
      }else if(this.addFrom.admintype_id === "") {
        this.$message({
          message: "请选择用户类别",
          type: "warning",
        });
      }else if(this.addFrom.bumen_id === "") {
        this.$message({
          message: "请选择所在部门",
          type: "warning",
        });
      }else {
        create_admin({
          bumen_id: this.addFrom.bumen_id,
          admintype_id: this.addFrom.admintype_id,
          title: this.addFrom.title,
          account: this.addFrom.account,
          file_url: this.addFrom.file_url,
          status: this.addFrom.status,
        }).then((res) => {
          if (res.retInt == 1) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.addFrom = {
              bumen_id:'',
              admintype_id:'',
              title:'',
              account:'',
              file_url:'',
              status:'1',
            };
            this.getAdminLists();
            this.addAdminShow = false;
          }
        });
      }
    },
    //取消添加
    quxiaoadd(){
      this.addAdminShow = false;
      this.addFrom = {
        bumen_id:'',
        admintype_id:'',
        title:'',
        account:'',
        file_url:'',
        status:'1',
      };
    },
    //编辑管理员
    edit(e) {
      this.editFrom = e
      this.editFrom.status = String(e.status)
      this.editAdminShow = true;
    },
    //编辑管理员
    editAdmin(id) {
      console.log(this.editFrom);
      if (this.editFrom.file_url === "") {
        this.$message({
          message: "请选择头像",
          type: "warning",
        });
      } else if(this.editFrom.title === "") {
        this.$message({
          message: "请填写用户名称",
          type: "warning",
        });
      }else if(this.editFrom.account === "") {
        this.$message({
          message: "请填写用户账号",
          type: "warning",
        });
      }else if(this.editFrom.admintype_id === "") {
        this.$message({
          message: "请选择用户类别",
          type: "warning",
        });
      }else if(this.editFrom.bumen_id === "") {
        this.$message({
          message: "请选择所在部门",
          type: "warning",
        });
      }else {
        update_admin({
          id:id,
          bumen_id: this.editFrom.bumen_id,
          admintype_id: this.editFrom.admintype_id,
          title: this.editFrom.title,
          account: this.editFrom.account,
          file_url: this.editFrom.file_url,
          status: this.editFrom.status,
        }).then((res) => {
          if (res.retInt == 1) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.editFrom = {};
            this.getAdminLists();
            this.editAdminShow = false;
          }
        });
      }
    },
    //删除管理员
    del(id) {
      this.$confirm("是否确认删除该分类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delete_admin({
            id: id,
          }).then((res) => {
            if (res.retInt == 1) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getAdminLists();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //上传七牛云
    zh_uploadFile() {
      this.$refs.evfile.click();
    },
    zh_uploadFile_change(evfile) {
      console.log(evfile);
      //file是选择的文件对象
      return new Promise((resolve, reject) => {
        qiniuconfig({
          md5key: localStorage.getItem("md5key"),
        }).then((res) => {
          //获取后台返的token  和域名
          this.baseurl = res.retRes.file_base;
          this.upload_path = res.retRes.upload_path;
          let uptoken = res.retRes.qiniu_token;
          let file = evfile.target.files[0];
          let key =
            this.upload_path +
            timeStamp2String(new Date().getTime(), 12) +
            "/" +
            new Date().getTime() +
            Math.floor(Math.random() * 1000) +
            file.name.substring(file.name.lastIndexOf("."), file.name.length); //这是上船后返回的文件名，这里为了避免重复，加上了时间戳和随机数
          var config = {
            useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
            // region: qiniu.region.z0, //选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域。
            domain: "https://static.idianjiao.com", //配置好的七牛云域名
            chunkSize: 100, //每个分片的大小，单位mb，默认值3
            forceDirect: true, //直传还是断点续传方式，true为直传
          };
          var putExtra = {
            fname: file.name, //文件原始文件名
            params: {},
            mimeType: [] || null,
          };
          var observable = qiniu.upload(file, key, uptoken, putExtra, config);
          observable.subscribe({
            next: (result) => {
              //主要用来展示进度
            },
            error: (err) => {
              //上传错误后触发
              console.log(err);
              reject(err);
            },
            complete: (result) => {
              //上传成功后触发。包含文件地址。
              console.log(file.name, "ahah");
              console.log(this.baseurl + "/" + result.key, "aheihei");
              this.addFrom.file_url = this.baseurl + "/" + result.key;
              resolve(result);
            },
          });
        });
      });
    },
    //分页
    handleCurrentChange(e){
      console.log(e)
      this.page = e
      this.getAdminLists();
    },
    handleSizeChange(e){
      console.log(e)
      this.page = 1;
      this.page_size = e;
      this.getAdminLists();
    },
    
  },
};
</script>
<style lang="scss" scoped>
.contaner {
  padding: 20px;
}
.selectTop {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  .allType {
    display: flex;
    align-items: center;
    .el-input {
      width: 200px;
    }
    div {
      margin-right: 20px;
    }
  }
  .serch {
    user-select: none;
    width: 80px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    background: #1e9fff;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
  }
  .serch:active {
    opacity: 0.8;
  }
  .addType {
    padding: 0 10px;
    height: 38px;
    line-height: 38px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    border: 1px solid transparent;
    background-color: #ffb800;
    user-select: none;
  }
  .addType:active {
    opacity: 0.8;
  }
}
.adminBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 10px;
  .file {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    img {
      width: 100px;
      border-radius: 100%;
      vertical-align: bottom;
      border: 4px solid #f3f3f3;
    }
  }
  h3{
    margin: 0;
  }
  p{
    margin: 5px 0;
    font-size: 12px;
    color: #999;
  }
  .caozuo{
    padding-bottom: 15px;
  }
}
.file-up{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9 ;
  i{
    font-size: 60px;
    color: #1890ff;
  }
  p{
    margin: 0;
    font-size: 12px;
    color: #666;
  }
  img{
    width: 100%;
  }
}
.pagination{
  margin: 20px auto;
  margin-top: 40px;
  text-align: center;
  width: 80%;
}
</style>